<template>
  <div class="list-container">
    <div class="page-header">
      <h2 class="page-title">培训签到管理</h2>
      <router-link to="/main/biao/gsqiandao" class="back-link">
        <el-button icon="el-icon-back" size="small">返回</el-button>
      </router-link>
    </div>

    <div class="operation-bar">
      <div class="search-area">
        <el-input v-model="listQuery.keyword" placeholder="请输入培训地点" class="search-input"
          @keyup.enter.native="handleFilter" clearable>
          <el-button slot="append" icon="el-icon-search" @click="handleFilter"></el-button>
        </el-input>
      </div>
      <div class="action-area">
        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
      </div>
    </div>

    <div class="table-container">
      <el-table v-loading="listLoading" :data="list" border stripe highlight-current-row
        :header-cell-style="{ background: '#f5f7fa' }">
        <el-table-column align="center" label="序号" width="80" type="index" :index="indexMethod">
        </el-table-column>
        <el-table-column label="培训时间" min-width="180" align="center">
          <template slot-scope="scope">
            {{ scope.row.trainingTime | parseTime }}
          </template>
        </el-table-column>
        <el-table-column label="培训地点" min-width="200" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.trainingLocation }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="280">
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(row)">
              编辑
            </el-button>
            <el-button type="success" size="mini" icon="el-icon-view" @click="handleView(row)">
              查看
            </el-button>
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.current" :limit.sync="listQuery.size"
          @pagination="getList" />
      </div>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="100px">
        <el-form-item label="培训时间" prop="trainingTime">
          <el-date-picker v-model="temp.trainingTime" type="datetime" format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择培训时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="培训地点" prop="trainingLocation">
          <el-input v-model="temp.trainingLocation" placeholder="请输入培训地点" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogStatus === 'create' ? createData() : updateData()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getTrainingSignInList, saveTrainingSignIn, deleteTrainingSignIn } from '@/api/trainingIn'
import Pagination from '@/components/Pagination'
import { formatDateTime, formatDate } from '@/utils/date'

export default {
  name: 'GsqiandaoList',
  components: { Pagination },
  filters: {
    parseTime(time) {
      return time ? formatDateTime(time) : ''
    }
  },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 10,
        keyword: ''
      },
      temp: {
        id: undefined,
        trainingTime: '',
        trainingLocation: '',
        employees: []
      },
      dialogVisible: false,
      dialogStatus: '',
      textMap: {
        update: '编辑',
        create: '新增'
      },
      rules: {
        trainingTime: [{ required: true, message: '培训时间不能为空', trigger: 'change' }],
        trainingLocation: [{ required: true, message: '培训地点不能为空', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      getTrainingSignInList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        trainingTime: '',
        trainingLocation: '',
        employees: []
      }
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveTrainingSignIn(this.temp).then(() => {
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '创建成功'
            })
            this.getList()
          })
        }
      })
    },
    handleUpdate(row) {
      this.$router.push(`/main/biao/gsqiandao?id=${row.id}&type=edit`)
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          saveTrainingSignIn(tempData).then(() => {
            this.dialogVisible = false
            this.$message({
              type: 'success',
              message: '更新成功'
            })
            this.getList()
          })
        }
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTrainingSignIn(row.id).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      })
    },
    handleView(row) {
      this.$router.push(`/main/biao/gsqiandao?id=${row.id}&type=view`)
    },
    indexMethod(index) {
      return (this.listQuery.current - 1) * this.listQuery.size + index + 1
    }
  }
}
</script>

<style lang="scss" scoped>
.list-container {
  padding: 20px;
  // background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  min-height: calc(100vh - 40px);
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(45deg, rgba(64, 158, 255, 0.05), rgba(103, 194, 58, 0.05));
    z-index: -1;
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
  }
}

.page-header {
  display: flex;
  margin-bottom: 24px;
  padding: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  justify-content: center;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #409EFF, #67C23A);
  }

  .page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #2c3e50;
    position: relative;
    padding-bottom: 10px;
    letter-spacing: 0.5px;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 50px;
      height: 3px;
      background: linear-gradient(90deg, #409EFF, #67C23A);
      border-radius: 3px;
      transition: all 0.3s ease;
    }
    
    &:hover::after {
      width: 80px;
    }
  }
  
  .back-link {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    
    .el-button {
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateX(-2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);

  .search-area {
    .search-input {
      width: 280px;
      
      :deep(.el-input__inner) {
        border-radius: 10px;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        border: 1px solid #e4e7ed;
        transition: all 0.3s ease;
        background: rgba(255, 255, 255, 0.9);
        
        &:hover {
          border-color: #409EFF;
          box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
        }
        
        &:focus {
          border-color: #409EFF;
          box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.2);
        }
      }
      
      :deep(.el-input-group__append) {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
        background: #409EFF;
        border-color: #409EFF;
        padding: 0 20px;
        
        .el-button {
          color: #fff;
          font-size: 16px;
          
          &:hover {
            background: linear-gradient(45deg, #409EFF, #67C23A);
          }
        }
      }
    }
  }

  .action-area {
    .el-button {
      height: 40px;
      padding: 0 25px;
      font-weight: 500;
      letter-spacing: 0.5px;
      border-radius: 10px;
      transition: all 0.3s ease;
      background: linear-gradient(45deg, #409EFF, #67C23A);
      border: none;
      color: white;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(64, 158, 255, 0.3);
      }
      
      i {
        font-size: 16px;
        margin-right: 6px;
      }
    }
  }
}

.table-container {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  
  &:hover {
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
  }
}

:deep(.el-table) {
  background: transparent;

  th {
    background-color: rgba(248, 249, 250, 0.8) !important;
    color: #2c3e50;
    font-weight: 600;
    padding: 16px 0;
    font-size: 14px;
    
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 1px;
      height: 60%;
      background: linear-gradient(to bottom, transparent, #EBEEF5, transparent);
    }
  }

  td {
    padding: 16px 0;
    font-size: 14px;
    color: #606266;
  }

  .el-table__row {
    transition: all 0.3s ease;
    
    &:hover {
      background-color: rgba(64, 158, 255, 0.05);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
      
      td {
        color: #409EFF;
      }
    }
  }

  .el-button--mini {
    padding: 6px 15px;
    margin: 0 4px;
    
    &.el-button--primary {
      background: linear-gradient(45deg, #409EFF, #36a3ff);
    }
    
    &.el-button--success {
      background: linear-gradient(45deg, #67C23A, #85ce61);
    }
    
    &.el-button--danger {
      background: linear-gradient(45deg, #F56C6C, #ff8989);
    }
  }
}

.pagination-container {
  padding: 20px;
  text-align: right;
  background: rgba(248, 249, 250, 0.8);
  border-top: 1px solid rgba(235, 238, 245, 0.6);
  
  :deep(.el-pagination) {
    .btn-prev, .btn-next {
      border-radius: 20px;
      padding: 0 10px;
      min-width: 35px;
      
      &:hover {
        color: #409EFF;
        background: rgba(64, 158, 255, 0.1);
      }
    }
    
    .el-pager li {
      border-radius: 20px;
      min-width: 35px;
      transition: all 0.3s ease;
      margin: 0 3px;
      
      &:hover {
        color: #409EFF;
        background: rgba(64, 158, 255, 0.1);
      }
      
      &.active {
        background: linear-gradient(45deg, #409EFF, #67C23A);
        color: #fff;
        font-weight: bold;
      }
    }
  }
}

:deep(.el-dialog) {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  
  .el-dialog__header {
    padding: 20px;
    background: linear-gradient(45deg, rgba(64, 158, 255, 0.05), rgba(103, 194, 58, 0.05));
    border-bottom: 1px solid rgba(235, 238, 245, 0.6);
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      letter-spacing: 0.5px;
    }
  }
  
  .el-dialog__body {
    padding: 30px 20px;
  }
  
  .el-dialog__footer {
    padding: 20px;
    background: rgba(248, 249, 250, 0.8);
    border-top: 1px solid rgba(235, 238, 245, 0.6);
  }

  .el-form-item__label {
    font-weight: 500;
    color: #2c3e50;
  }

  .el-input__inner {
    border-radius: 8px;
    transition: all 0.3s ease;
    
    &:hover, &:focus {
      border-color: #409EFF;
      box-shadow: 0 0 0 3px rgba(64, 158, 255, 0.1);
    }
  }
}

/* 响应式布局优化 */
@media screen and (max-width: 768px) {
  .list-container {
    padding: 16px;
    margin: 0;
    
    &::before {
      height: 150px;
    }
  }

  .page-header {
    padding: 16px;
    margin-bottom: 20px;
  }

  .operation-bar {
    flex-direction: column;
    gap: 16px;
    padding: 16px;

    .search-area {
      .search-input {
        width: 100%;
      }
    }

    .action-area {
      justify-content: center;
      width: 100%;
      
      .el-button {
        flex: 1;
      }
    }
  }

  .table-container {
    border-radius: 8px;
    margin: 0 -8px;
  }

  .pagination-container {
    padding: 16px;
    
    :deep(.el-pagination) {
      justify-content: center;
    }
  }
}
</style>